<!--
 * @Description: DOM
 * @Author: rendc
 * @Date: 2022-10-11 09:14:23
 * @LastEditors: rendc
 * @LastEditTime: 2022-10-11 11:21:41
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
</head>

<body>
  <div id="div1">
    11<!-- 注释 -->
    <div id="div1_1" class="div1Class">1.1</div>
    <div id="div1_2" class="div1Class">1.2</div>
    <div id="div1_3" class="div1Class">1.3</div>
  </div>
  <div id="div2">
    <div class="div1Class"></div>>2.1
  </div>
  <div id="div6">0</div>
  <p name="ppp" class="pClass">p</p>
  <p name="ppp" class="pClass">p</p>
</body>
<script>
  var div1 = document.getElementById('div1')
  console.log('🤡 CC - div1', div1);
  var div1_2 = document.createElement('div');
  div1_2.innerText = "1.2";
  console.log('🤡 CC - div1_2', div1_2);
  var result = div1.appendChild(div1_2);
  console.log('🤡 CC - result', result);
  console.log('🤡 CC - div1', div1);
  var div2 = document.createElement('div');
  div2.setAttribute("id", "div2")
  console.log('🤡 CC - div2', div2);
  div2.innerText = "div2"
  // div2.innerHTML = "div2"
  div1.insertBefore(div2, div1_2);
  var div3 = document.createElement('div');
  div3.setAttribute("id", "div3")
  div3.innerText = "div3"
  div1.replaceChild(div3, div2);
  div1.removeChild(div1_2);
  let div4 = div3.cloneNode();
  console.log('🤡 CC - div3', div3);
  console.log('🤡 CC - div4', div4);
  let div5 = div3.cloneNode(true);
  console.log('🤡 CC - div3', div3);
  console.log('🤡 CC - div5', div5);
  console.log(document);
  console.log(document.body);
  console.log(document.title);
  document.title = "DOM1"
  console.log(document.URL);
  console.log(document.domain);
  console.log(document.images);
  console.log(document.forms);
  console.log(document.links);
  var divClass = document.getElementsByClassName("div1Class");
  console.log('🤡 CC - divClass', divClass);
  var pClass = document.getElementsByClassName("pClass");
  console.log('🤡 CC - pClass', pClass);
  var divs = document.getElementsByTagName("div")
  console.log('🤡 CC - divs', divs);
  var ppp = document.getElementsByName("ppp")
  console.log('🤡 CC - ppp', ppp);
  var div1_1 = document.getElementById('div1_1');
  console.log('🤡 CC - div1_1', div1_1);
  console.log(div1_1.id);
  console.log(div1_1.className);
  div1_1.setAttribute("class", "div1_1")
  div1_1.className = "test"
  console.log(div1_1.className);
  // div1_1.removeAttribute('class')
  // div1_1.removeAttribute('id')
  console.log("div1.firstElementChild", div1.firstElementChild);
  console.log("div1.lastElementChild", div1.lastElementChild);
  console.log("div1.childElementCount", div1.childElementCount);
  console.log(div1_1.nextElementSibling);
  console.log(div1_1.previousElementSibling);
  var div6 = document.getElementById('div6');
  console.log('🤡 CC - div6', div6);
  var div6firstChild = div6.firstChild;
  console.log('🤡 CC - div6firstChild', div6firstChild);
  div6firstChild.appendData('123'); // 0123
  div6firstChild.deleteData(0, 1); // 123
  div6firstChild.insertData(0, 0); // 0123
  div6firstChild.replaceData(0, 1, 9); // 9123
  document.createTextNode('9999');
  // div6.innerText = "div6"
  console.log(div1.nodeType);
  console.log(div1.nodeName);
  console.log(div1.nodeValue);
  console.log(document.nodeType);
  console.log(document.nodeName);
  console.log(document.nodeValue);
  var comment = div1.firstChild;
  console.log('🤡 CC - comment', comment);
  console.log('🤡 CC - comment', comment.nodeType);
  console.log('🤡 CC - comment', comment.nodeName);
  console.log('🤡 CC - comment', comment.nodeValue);
</script>
</script>

</html>